<template>
  <div
    style="
      background-color: #9921e8;
      background-image: linear-gradient(315deg, #9921e8 0%, #5f72be 74%);
    "
  >
    <div
      class="body-bg min-h-screen pt-12 md:pt-20 pb-6 px-2 md:px-0"
      style="font-family: 'Lato', sans-serif"
    >
      <header class="max-w-lg mx-auto">
        <a href="#">
          <h1 class="text-4xl font-bold text-white text-center">VueAdmin</h1>
        </a>
      </header>

      <main
        class="bg-white max-w-lg mx-auto p-8 md:p-12 my-10 rounded-lg shadow-2xl"
      >
        <section>
          <h3 class="font-bold text-2xl">Welcome to VueAdmin</h3>
          <p class="text-gray-600 pt-2">Sign in to your account.</p>
        </section>

        <section class="mt-10">
          <div class="flex flex-col">
            <div class="mb-6 pt-3 rounded bg-gray-200">
              <label class="block text-gray-700 text-sm font-bold mb-2 ml-3"
                >UserId</label
              >
              <input
                type="text"
                placeholder="请输入账号"
                class="bg-gray-200 rounded w-full text-gray-700 focus:outline-none border-b-4 border-gray-300 focus:border-purple-600 transition duration-500 px-3 pb-3"
                v-model="userData.id"
              />
            </div>
            <div class="mb-6 pt-3 rounded bg-gray-200">
              <label
                class="block text-gray-700 text-sm font-bold mb-2 ml-3"
                for="password"
                >Password</label
              >
              <input
                type="password"
                placeholder="请输入密码"
                class="bg-gray-200 rounded w-full text-gray-700 focus:outline-none border-b-4 border-gray-300 focus:border-purple-600 transition duration-500 px-3 pb-3"
                v-model="userData.password"
              />
            </div>
            <div class="flex justify-end">
              <a
                href="#"
                class="text-sm text-purple-600 hover:text-purple-700 hover:underline mb-6"
                >Forgot your password?</a
              >
            </div>
            <button
              class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded shadow-lg hover:shadow-xl transition duration-200"
              @click="userLogin()"
            >
              Sign In
            </button>
          </div>
        </section>
      </main>

      <div class="max-w-lg mx-auto text-center mt-12 mb-6">
        <p class="text-white">
          Don't have an account?
          <a href="#" class="font-bold hover:underline">Sign up</a>.
        </p>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
    route: { name: "login", meta: { guest: true } },
};
</script>
<script setup lang="ts">
import user from "@/store/user";
import { UserLoginData } from "@/apis/user";

const userData = ref<UserLoginData>({
    id: "admin",
    password: "123456",
});

const userStore = user();
const userLogin = () => {
    userStore.userLogin(userData.value);
};
</script>

<style lang="scss" scoped></style>
